import styles from './index.module.scss'
import { videoProps } from '../../store'
import { useRecoilValue } from 'recoil'
import cm from 'classnames'
import { useRouter } from 'next/router'
import message from '@c/message'
import { vodDetailReport, liveReport, scoreTaskFinishedReport } from '@/utils/report'
import { taskFinished } from '@/api/score'
import Copy from 'clipboard'
import { useEffect, useMemo } from 'react'

const Index = () => {
  const { isLive, name } = useRecoilValue(videoProps)
  const router = useRouter()
  const share = () => {
    const token = localStorage.getItem('token')
    if (token) {
      taskFinished({
        completionStatus: isLive ? 3 : 2,
        ydtoken: ''
      })
    }
    scoreTaskFinishedReport({
      points_name: isLive ? '直播分享' : '点播分享'
    })
    if (isLive) {
      liveReport({
        share_status: '链接'
      })
    } else {
      vodDetailReport({
        share_status: '链接'
      })
    }
  }

  const urlMemo = useMemo(() => {
    const vodStr = `点链接来星视界，和我一起免费看《${name.split('第')[0]}》：https://www.histar.tv/vod/detail/${
      router.query.id
    }`
    const liveStr = `点链接来星视界，和我一起免费看《${name}》：https://www.histar.tv/live/${router.query.id}`
    return isLive ? liveStr : vodStr
  }, [isLive, name, router.query.id])
  useEffect(() => {
    const copyUrl = new Copy('.share-btn')
    copyUrl.on('success', () => {
      message({ content: '链接已复制，分享好友领积分兑会员！' })
    })
  }, [])
  return (
    <div className={cm(styles['controls-share'], 'share-btn')} data-clipboard-text={urlMemo} onClick={share}>
      <img src="/images/corn.webp" alt="" className={styles.corn} />
      <div className={styles.imgShare}></div>
    </div>
  )
}

export default Index
